<template>
  <div class="select-box" @mouseleave="mouseLeave">
    <div class="select-box2" @click="showSelect">
      <div class="isTime">{{ nowTime.name }}</div>
      <i class="el-icon-caret-bottom"></i>
    </div>
    <div class="select-box3" v-if="isShow">
      <div
        @click="thisActive(item)"
        class="select-box3-list"
        v-for="(item, index) in timeList"
        :key="index"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    nowTime: {
      //选中时间
      type: Object, //类型
      default: true, //默认值
    },
    timeList: {
      //所有选项
      type: Array, //类型
      default: true, //默认值
    },
    // isShow: {
    //   //是否展开下拉
    //   type: Boolean,
    //   default: true, //默认值
    // },
  },
  name: "SelectTime",
  data() {
    return {
      isShow: false,
    };
  },
  methods: {
    mouseLeave() {
      console.log(40);
      this.isShow = false;
    },
    showSelect() {
      this.isShow = !this.isShow;
    },
    thisActive(e) {
      console.log("item", e);
      this.isShow = false;
      this.$emit("thisActive", e);
    },
  },
};
</script>

<style scoped lang="scss">
.select-box {
  width: 1rem;
  height: 0.3rem;
  background: rgba(87, 215, 249, 0.05);
  background-image: url("../../assets/home/timeSelect.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  cursor: pointer;
  z-index: 3;
  .select-box2 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    .isTime {
      font-size: 0.14rem;
      font-family: Source Han Sans CN, Source Han Sans CN-Regular;
      font-weight: 400;
      color: #ffffff;
    }
    i {
      margin-left: 0.04rem;
    }
  }
  .select-box3 {
    background: rgba(14, 72, 90, 0.5);
    width: 1rem;
    padding: 0.05rem 0;
    box-shadow: 0 0 0.05rem #57d7f9;
    //margin-top: .03rem;
    .select-box3-list {
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 0.3rem;
    }
    .select-box3-list:hover {
      background: rgba(1, 26, 26, 0.8);
      box-shadow: 0 0 0.05rem #57d7f9;
    }
  }
}
</style>
